<template>
	<view>
		<view class="box-list" :style="needPadding ? 'padding: 0 41rpx 0 37rpx' : ''">
			<view class="box" v-for="(item, index) in shopData" :key="index" @click="toPreserve(item)">
				<view class="left">
					<image class="img" mode="aspectFill" :src="item.images" alt="" />
					<view v-if="item.text" class="left-text" @click="textClick(item)">{{ item.text }}</view>
					<view class="store-code" v-if="item.storeCode">
						No.{{item.storeCode}}
					</view>
				</view>
				<view class="right">
					<view class="shop-name">
						<view class="name-left">
							<view class="name">{{ item.storeName }}</view>
							<!-- <view class="tag-number" v-if="item.storeCode">{{item.storeCode}}</view> -->
							<view :class="['status', getStatusClass(item)]" v-if="shouldShowStatus(item)">
								{{ getStatusText(item) }}
							</view>
						</view>
						<view class="name-right">
							<uni-icons type="location-filled" size="16" color="#b4b4b4"></uni-icons>
							<view class="distant">{{ item.distance }} km</view>
							<!-- <uni-icons type="right" size="12" color="#676767"></uni-icons> -->
						</view>
					</view>
					<view class="not-during" v-if="item.state !== 1 && item.state">5月13日开业</view>
					<view class="shop-time">
						<view class="time-left">
							<u-icon name="clock" color="#666666" size="15"></u-icon>
							<view class="time" :style="needTime ? 'transform: translateY(6rpx)' : ''">营业时间：
								{{ item.openingTime }}~{{ item.closingTime }}
							</view>
						</view>
						<view class="time-right" v-if="item.status" @click.stop="toShopDetail(item)">
							<view class="detail">详情</view>
						</view>
					</view>
					<view class="shop-address">
						<view class="address-left">
							<view style="height: 30rpx;"><u-icon name="map" color="#666666" size="15"></u-icon></view>
							<view class="address">
								{{ item.provinceString }}{{ item.cityString }}{{ item.countyString }}{{ item.detail }}
							</view>
						</view>
						<view class="address-right" v-if="item.status" @click.stop="makePhoneCall(item)">
							<!-- <view class="detail">预约</view> -->
							<u-icon name="phone" color="#fff" size="15"></u-icon>
						</view>
					</view>
					<!-- <view class="shop-time">
						<view class="time-left" @click.stop="makePhoneCall(item)">
							<u-icon name="phone" color="#666666" size="15"></u-icon>
							<view
								style=" font-size: 22rpx; font-weight: 400;color: rgba(102, 102, 102, 1);margin-left: 10rpx;line-height: 30rpx;color: red;">
								电话:{{ item.phoneNumber }}</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view>
			<you-popup :popupVisible="statusVisible" popupTitle="温馨提示" @popupClose="statusVisible = false"
				@cancel="clickCancel" @confirm="clickConfirm" bgColor="#fff">
				<view slot="popupContent">
					<!-- 标题 -->
					<view class="contain-text"> 确认要取消门店的常用标记吗？</view>
				</view>

				<view slot="btnBox" class="popup-submit flexJcac">
					<view class="submit" @click="submitStatus">是</view>
					<view class="no-submit" @click="statusVisible = false">否</view>
				</view>
			</you-popup>
		</view>
	</view>
</template>

<script>
	import YouPopup from "@/components/you-popup/index.vue"
	import config from '@/config'
	export default {
		name: 'shopList',
		components: {
			YouPopup
		},
		data() {
			return {
				id: '',
				baseUrl: config.baseUrl,
				popupFlag: '',
				statusVisible: false,
				stopVisible: false,
				stopMaessage: {},
				shopData: [],
				statusBgColor: {
					1: 'background: linear-gradient(90deg, rgba(252, 120, 66, 1) 0%, rgba(254, 85, 56, 1) 100%)',
					2: 'background: rgba(201, 201, 201, 1);'
				},
			}
		},
		props: {
			shopConfig: {
				type: Array,
				default: []
			},
			needPadding: {
				type: Boolean,
				default: true
			},
			needTime: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			shopConfig: {
				handler(newVal, oldVal) {
					this.shopData = [...newVal]
				}
			}
		},
		created() {
			this.shopData = [...this.shopConfig]
		},

		methods: {

			toShopDetail(item) {
				// if (item.status === 1) {
				this.$emit('toDetail', item)
				// }
				// if (item.status === 2) {
				//   this.popupFlag = 2
				//   this.stopVisible = true
				// }
				// if (item.status === 3) {
				//   this.popupFlag = 1
				//   this.stopVisible = true
				// }
			},
			makePhoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: item.landlinePhone, // 替换为您要拨打的电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			toPreserve(item) {
				uni.removeStorageSync('chooseTechnician');
				this.$emit('toPreserve', item)

			},
			textClick(item) {
				this.$emit('textClick', item)
			},
			submitClick(item) {
				this.$emit('submitClick', item)
			},
			submitStatus() {
				const index = this.shopData.findIndex((item) => {
					return item.id == this.id
				})
				this.shopData[index].status = 2
				this.statusVisible = false
			},
			//状态判断
			shouldShowStatus(item) {
				return item.status;
			},
			getStatusClass(item) {
				// if (item.status === 1) {
				// 	const now = new Date();
				// 	const closingTime = this.getFullClosingTime(item.closingTime);
				// 	if (now > closingTime) {
				// 		return 'stop';
				// 	}
				// }
				return item.status === 1 ? 'during' : (item.status === 2 ? 'ready' : 'stop');
			},
			getStatusText(item) {
				// if (item.status === 1) {
				// 	const now = new Date();
				// 	const closingTime = this.getFullClosingTime(item.closingTime);
				// 	if (now > closingTime) {
				// 		return '休息中';
				// 	}
				// }
				return item.status === 1 ? '营业中' : (item.status === 2 ? '筹备中' : '暂停营业');
			},
			getFullClosingTime(timeStr) {
				const now = new Date();
				const [hours, minutes] = timeStr.split(':').map(Number);
				const closingTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
				return closingTime;
			}
		}

	}
</script>

<style lang="scss" scoped>
	.contain-text {
		width: 100%;
		text-align: center;
	}

	.box-list {
		// padding: 0 41rpx 0 37rpx;
		margin-bottom: 120rpx;

		.box {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0 28rpx 0;
			border-bottom: 1rpx solid rgba(230, 230, 230, 1);

			&:last-child {
				border-bottom: none;
			}

			.left {
				width: 130rpx;
				height: 130rpx;
				position: relative;

				.img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: #c1c1c1;
				}

				.store-code {
					color: #fff;
					font-size: 20rpx;
					background: #fc7441;
					border-radius: 20rpx;
					line-height: 1;
					text-align: center;
					position: absolute;
					bottom: 0;
					width: 120rpx;
					padding: 4rpx 0;
				}

				.img-tag {
					position: absolute;
					bottom: -20rpx;
					left: 10.2rpx;
					width: 106rpx;
					height: 40rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					opacity: 1;
					border-radius: 31rpx;
					background-color: #fc7441;
				}

				.left-text {
					margin-top: 14rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(194, 126, 21, 1);
					text-align: center;
				}
			}

			.right {
				width: 75%;

				.shop-name {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12rpx;

					.name-left {
						display: flex;

						// background-color: #fc7441;
						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							height: 37rpx;
							line-height: 37rpx;
							white-space: nowrap;
						}

						.tag-number {
							width: 80rpx;
							height: 37rpx;
							opacity: 1;
							border-radius: 8rpx;
							line-height: 37rpx;
							border: 1rpx solid rgba(253, 90, 57, 1);
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(253, 89, 57, 1);
							margin-left: 20rpx;
						}

						.status {
							width: 99rpx;
							height: 37rpx;
							opacity: 1;
							border-radius: 8rpx;
							line-height: 37rpx;
							font-size: 20rpx;
							font-weight: 400;
							text-align: center;
							margin-left: 12rpx;
						}

						.during {
							color: rgba(253, 89, 57, 1);
							background: rgba(255, 237, 234, 1);
						}

						.stop {
							color: rgba(176, 171, 170, 1);
							background: rgba(243, 243, 243, 1);
						}

						.ready {
							color: rgba(222, 178, 0, 1);
							background: rgba(255, 250, 231, 1);
						}
					}

					.name-right {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;

						.distant {
							font-size: 22rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 31.86rpx;
							color: rgba(102, 102, 102, 1);
							transform: translateY(5rpx);
							white-space: nowrap;
						}
					}
				}

				.not-during {
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(253, 89, 57, 1);
				}

				.shop-time {
					display: flex;
					justify-content: space-between;

					.time-left {
						display: flex;

						.time {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							// transform: translateY(6rpx);
							margin-left: 10rpx;
						}
					}

					.time-right {
						.detail {
							width: 92rpx;
							height: 41rpx;
							opacity: 1;
							border-radius: 32rpx;
							line-height: 41rpx;
							border: 1rpx solid rgba(194, 126, 21, 1);
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(194, 126, 21, 1);
						}
					}
				}

				.shop-address {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.address-left {
						display: flex;
						width: 75%;

						.address {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 9rpx;
						}
					}

					.address-right {
						margin-top: 10rpx;
						// margin-right: 20rpx;
						background-color: rgb(82, 199, 35);
						color: #fff;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 25rpx;

						img {
							width: 41.92rpx;
							height: 41.92rpx;
						}

						.detail {
							width: 92rpx;
							height: 41rpx;
							opacity: 1;
							border-radius: 32rpx;
							line-height: 41rpx;
							background: rgba(194, 126, 21, 1);
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #fff;
						}

					}
				}
			}

		}
	}
</style>